import Taro from "@tarojs/taro";
import { Image, Text, View } from "@tarojs/components";
import { Cell } from "@nutui/nutui-react-taro";
import { useEffect, useState } from "react";
import "./movieCard.scss";




const MovieCard = ({ props }) => {
    const [bgColor, setBgColor] = useState("");
    useEffect(() => {
        Taro.request({
            url: `https://apis.netstart.cn/maoyan/movie/detail?movieId=${props.id}`,
            success: (res) => {
                setBgColor(res.data.movie.backgroundColor + "35");
            }
        });
    }, []);


    if (!props) {
        return <div>Loading...</div>; // 或者其他适当的加载状态 
    }

    return (

        <View className='carContainer' style={{ backgroundColor: bgColor }} onClick={() => Taro.navigateTo({ url: `/pages/detail/detail?id=${props.id}` })}>
            <Image className='Image' src={props.img} />
            <View className='carContainer-view'>
                <Text className='carContainer-h1'>{props.nm}</Text>
                <Text className='carContainer-p'>评分:{props.sc === 0 ? "暂无评分" : props.sc}</Text>
                <Text className="carContainer-p">主演:{props.star}</Text>

                <Text className="carContainer-p">{props.showInfo}</Text>
            </View>

        </View>

    );
};

export default MovieCard;
